<template>
  <img v-if="!errorFlag" :src="url" style="margin: 10px 50%;transform: translateX(-50%);max-width: 96%;">
  <div v-else class="error-image-box">图片加载失败 或 该文件不能预览！</div>
</template>
<script>
  export default {
    props: ['src'], // 父组件传过来所需的url
    data() {
      return {
        url: 'http://www.86y.org/images/loading.gif', // 先加载loading.gif
        errorFlag: false
      }
    },
    mounted() {
      const newImg = new Image()
      newImg.src = this.src
      newImg.onerror = () => {
        // 图片加载错误时的替换图片
        this.errorFlag = true
        // newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
      }
      newImg.onload = () => { // 图片加载成功后把地址给原来的img
        this.errorFlag = false
        this.url = newImg.src
      }
    },
    watch: {
      src(curVal, oldVal) {
        this.url = 'http://www.86y.org/images/loading.gif'
        const newImg = new Image()
        newImg.src = this.src
        newImg.onerror = () => {
          this.errorFlag = true
          // 图片加载错误时的替换图片
          // newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
        }
        newImg.onload = () => { // 图片加载成功后把地址给原来的img
          this.errorFlag = false
          this.url = newImg.src
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .error-image-box{
    padding: 20px;
    text-align: center;
    font-size: 14px;
  }
</style>
